<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.1">
    <title>仪表盘2</title>
    <style>
        body { 
            margin: 0; 
            padding: 0; 
            background:#000;
			font-family: 'Oxanium';
        }
        canvas { 
            display: block;
        }
		.canvas-container {
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0;
            padding: 0;
        }
		.fix{
			opacity: 0.45;
		}
    </style>
</head>
<body>
	<div class="canvas-container">
		<div id="container" style="opacity: 0;"></div>
	</div>
	<script src="konva.min.js"></script>
    <script>
		//配置
		const width = 1200;
        const height = 300;
		const fontFamily = 'Oxanium';
		const backgroundColor = '#000000';
		const tireWearDeadLine = 0.6; //轮胎磨损预估上限
		const body = document.getElementById('container');
		//区块配置
		const blocks = [
			{
				//方向盘
				x:900,
				y:0,
				width:300,
				height:300,
				contents:(data,block)=>{
					if( data.IsRaceOn && body.style.opacity != 1){
						body.style.opacity = 1;
					}else if( !data.IsRaceOn && body.style.opacity != 0){
						body.style.opacity  = 0;
					}
					return [
						//方向底色
						new Konva.Arc({
							x:block.x + 150,
							y:block.y + 150 + 16,
							innerRadius: 70,
							outerRadius: 130,
							angle: 270,
							rotation:((steer)=>{
								return 135 +  (wheelDegree/2-15) * steer/127;
							})( data.Steer || 0 ),
							fill: '#dddddd'
						}),
						//方向颜色
						new Konva.Arc({
							x:block.x + 150,
							y:block.y + 150 + 16,
							innerRadius: 70,
							outerRadius: 130,
							angle: 30,
							rotation:((steer)=>{
								return - 105 +  (wheelDegree/2-15) * steer/127;
							})( data.Steer || 0 ),
							fill: '#000099',
							strokeWidth: 10,
						}), 
						//方向文字
						centerText({
							x:block.x,
							y:block.y + 145,
							width:300,
							height:70,
							text: (()=>{
								return (Math.round( ( data.Steer / 127 ) * wheelDegree / 2 ) || '0')+'°'
							})(),
							fontSize: 40,
							fill: '#dddddd',
						}),
						//百分号
						// centerText({
						// 	x:block.x,
						// 	y:block.y + 200,
						// 	width:300,
						// 	height:100,
						// 	text: 'deg',
						// 	fontSize: 40,
						// 	fill: '#dddddd',
						// }),
					];
				}
			},
			
			{//操作
				x:0,
				y:0,
				width:900,
				height:300,
				contents:(data,block)=>{
					let contents = [
						//油门背景
						new Konva.Rect({
							x:block.x + 830,
							y:block.y + 10,
							width:60,
							height:280,
							fill: '#101010',
						}),
						//油门前景
						new Konva.Rect({
							x:block.x + 830,
							y:(value=>{
								return block.y + 10 + 280 - (value / 255 * 280);
							})(data.Accel),
							width:60,
							height:(value=>{
								return value / 255 * 280;
							})(data.Accel),
							fill:'#009900'
						}),
						//油门文字
						centerText({
							x:block.x + 820,
							y:block.y + 135,
							width:80,
							height:30,
							text: Math.round( data.Accel / 255 * 100 ) || '0',
							fontSize: 36,
							fill: '#ffffff',
						}),
						//刹车背景
						new Konva.Rect({
							x:block.x + 760,
							y:block.y + 10,
							width:60,
							height:280,
							fill: '#101010',
						}),
						//刹车前景
						new Konva.Rect({
							x:block.x + 760,
							y:(value=>{
								return block.y + 10 + 280 - (value / 255 * 280);
							})(data.Brake),
							width:60,
							height:(value=>{
								return value / 255 * 280;
							})(data.Brake),
							fill:'#990000'
						}),
						//刹车文字
						centerText({
							x:block.x + 750,
							y:block.y + 135,
							width:80,
							height:30,
							text: Math.round( data.Brake / 255 * 100 ) || '0',
							fontSize: 36,
							fill: '#ffffff',
						}),
						//曲线背景
						new Konva.Rect({
							x:block.x + 10,
							y:block.y + 10,
							width:740,
							height:280,
							fill: '#101010',
						})
					];
					//曲线格
					for(i = 1 ; i <= 4 ; i++){
						contents.push( new Konva.Line({
							x : block.x + 10,
							y : block.y + 10 + (i * 56) ,
							points: [0, 0, 740, 0],
							stroke: '#000000',
							strokeWidth: 2,
						}) )
					}
					
					// //档位曲线
					// if(data.IsRaceOn){
					// 	GearList.unshift( data.Gear <=10 ? (data.Gear / data.MaxGear) : null );
					// 	GearList.length = 246;
					// }
					// contents.push( new Konva.Line({
					// 	x : block.x + 10,
					// 	y : block.y + 10,
					// 	points:getPoints(GearList, 740, 280 , 3 ),
					// 	stroke: '#ff9900',
					// 	strokeWidth: 4,
					// }) );
					// //速度曲线
					// if(data.IsRaceOn){
					// 	SpeedList.unshift( data.Speed / data.MaxSpeed );
					// 	SpeedList.length = 220;
					// }
					// contents.push( new Konva.Line({
					// 	x : block.x + 10,
					// 	y : block.y + 10,
					// 	points:getPoints(SpeedList, 440, 280 , 2 ),
					// 	stroke: '#666666',
					// 	strokeWidth: 4,
					// }) );
					
					//方向盘曲线
					// if(data.IsRaceOn){
					// 	SteerList.unshift( data.Steer/127 );
					// 	SteerList.length = 246;
					// }
					// contents.push( new Konva.Line({
					// 	x : block.x + 10,
					// 	y : block.y + 10,
					// 	points:getPoints(SteerList, 740, 140 , 3 ),
					// 	stroke: '#0000FF',
					// 	strokeWidth: 4,
					// }) );

					// if(data.IsRaceOn){
					// 	RPMList.unshift( data.CurrentEngineRpm / data.EngineMaxRpm );
					// 	RPMList.length = 246;
					// }
					// contents.push( new Konva.Line({
					// 	x : block.x + 10,
					// 	y : block.y + 10,
					// 	points:getPoints(RPMList, 740, 280 , 3 ),
					// 	stroke: '#FFFFFF',
					// 	strokeWidth: 4,
					// }) );
					//油门曲线
					if(data.IsRaceOn){
						AccelList.unshift( data.Accel/255 );
						AccelList.length = 246;
					}
					contents.push( new Konva.Line({
						x : block.x + 10,
						y : block.y + 10,
						points:getPoints(AccelList, 740, 280 , 3),
						stroke: '#00FF00',
						strokeWidth: 4,
					}) );
					//刹车曲线
					if(data.IsRaceOn){
						BrakeList.unshift( data.Brake/255 );
						BrakeList.length = 246;
					}
					contents.push( new Konva.Line({
						x : block.x + 10,
						y : block.y + 10,
						points:getPoints(BrakeList, 740, 280 , 3),
						stroke: '#FF0000',
						strokeWidth: 4,
					}) );
					return contents;
				}
			}
		];
    </script>
	<script src="./main.js"></script>
</body>
</html>
